<script setup>
import { ref, onMounted } from 'vue'
import { CommonPage, MeCrud, MeQueryItem } from '@/components'
import api from './api'
import { useCrud } from '@/composables/index.js'
import { NButton } from 'naive-ui'
import { usePermission } from '@/composables'

defineOptions({ name: 'SongList_MIDI' })

const $table = ref(null)
onMounted(() => {
  $table.value?.handleSearch()
})

const queryItems = ref({})

const { hasPermission } = usePermission()
const columns = [
  { title: '歌曲名', key: 'name' },
  { title: '上传者', key: 'uploader', width: 500 },
  { title: '上传时间', key: 'createdAt', width: 300 },
  {
    title: '操作',
    key: 'actions',
    width: 200,
    align: 'center',
    fixed: 'right',
    render: (row) => {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            style: 'margin-left: 12px;',
            disabled: !hasPermission('SUPER_ADMIN', 'ADMIN'),
            onClick: () => handleDelete(row.id),
          },
          {
            default: () => '删除',
            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
          },
        ),
      ]
    },
  },
]

function handleSearch({ pageNo, pageSize, name }) {
  return api.getMidiList(pageNo, pageSize, name)
}

const { handleDelete } = useCrud({
  name: 'MIDI曲谱',
  doDelete: api.deleteOne,
  refresh: () => $table.value?.handleSearch(),
})
</script>

<template>
  <CommonPage>
    <MeCrud
      ref="$table"
      v-model:query-items="queryItems"
      remote
      is-pagination
      :scroll-x="1200"
      :columns="columns"
      :get-data="handleSearch"
    >
      <MeQueryItem label="歌曲名" :label-width="50">
        <n-input
          v-model:value="queryItems.name"
          type="text"
          placeholder="请输入歌曲名"
          clearable
          @keyup.enter="() => $table.handleSearch()"
        />
      </MeQueryItem>
    </MeCrud>
  </CommonPage>
</template>

<style scoped lang="less"></style>
